<script setup>
import { useCalendarStore } from "../stores/calendar";

import { storeToRefs } from "pinia";

const Calendar = useCalendarStore();

const { dataList, currentDate, currentMonth, currentYear } =
  storeToRefs(Calendar);

const { setCurrentMonth, setCurrentDate } = Calendar;

const changeDate = (data) => {
  setCurrentDate(data.date);
  if (data.tag === "last") {
    console.log("last");
    setCurrentMonth(currentMonth.value - 1);
  }
  if (data.tag === "next") {
    setCurrentMonth(currentMonth.value + 1);
  }
};

const isToday = (data) => {
  const now = new Date();
  return (
    currentYear.value == now.getFullYear() &&
    currentMonth.value == now.getMonth() + 1 &&
    data.tag === "current" &&
    data.date == now.getDate()
  );
};
</script>

<template>
  <div class="content">
    <div class="week-text">
      <span>一</span>
      <span>二</span>
      <span>三</span>
      <span>四</span>
      <span>五</span>
      <span>六</span>
      <span>日</span>
    </div>
    <ul>
      <li
        v-for="(data, index) in dataList"
        :class="{
          active: data.tag === 'current' && data.date === currentDate,
          'cur-month': data.tag === 'current',
          today: isToday(data),
        }"
        @click="changeDate(data)"
      >
        {{ data.date }}
      </li>
    </ul>
  </div>
</template>

<style scoped>
.content {
  /* margin: -0.16rem -0.16rem 0; */
  /* border-radius: 0.16rem; */
  background-color: #736c6c;
  position: relative;
  padding: 0 10px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #fff;
}
.week-text {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
}
/* 第六第七个字设置为红色 */
.week-text span:nth-child(6),
.week-text span:nth-child(7) {
  color: #eb3333;
}
ul {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 10px;
  list-style: none;
  padding: 10px;
  margin: 0;
  gap: 25px;
}
li {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 10px;
  color: gray;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  box-shadow: 0 0 3px #565050;
  cursor: pointer;
  user-select: none;
  opacity: 0.5;
}
li:hover {
  background-color: rgba(78, 110, 242, 0.3);
}
li.cur-month {
  opacity: 1;
}
li.today {
  color: rgb(71 110, 242);
}
li.today::before {
  content: "今";
  position: absolute;
  display: block;
  width: 20px;
  height: 20px;
  top: -5px;
  right: -5px;
  background-color: rgb(71 110, 242);
  font-size: 16px;
  line-height: 20px;
  color: #fff;
}
/* grid倒数两行字体设置为红色 */
li:nth-child(7n-1),
li:nth-child(7n) {
  color: #eb3333;
}
li.active {
  color: white;
  background-color: rgba(78, 110, 242, 1);
}

</style>